<!-- 有状态的按钮
      主要用于编辑器的工具栏内的按钮
      1.3部分组成：主组件，状态背景，图标
      2.状态：有效|无效，选中|未选中 [enable,selected]
      3.属性：图标颜色、状态背景颜色
      按钮事件:
      1.点击事件：不可用状态下不可用
      2.选中事件：不可用状态下不可用

-->
<script setup lang="ts">
import { computed, onUpdated, ref } from 'vue'
//发出事件
const emit = defineEmits<{
  (e: 'click', click: boolean): void
  (e: 'select', selected: boolean): void
}>()
/**
 * 属性
 * 1.enable 是否可用
 * 2.selectable 当时组件是响应选中事件还是点击事件
 */
const props = defineProps<{
  alt: string
  state: {
    selected?: boolean //是否选中
    enable?: boolean //是否可用
    selectable?: boolean //是否是选中按钮
    backgroundColor?: string //背景颜色
  }
}>()
const selected = ref(props.state.selected)
const enable = props.state.enable
const selectable = props.state.selectable
onUpdated(() => {
  selected.value = props.state.selected
})

/**
 * 响应点击事件，当组件处于无效状态下，点击事件不应该响应
 */
function onClick() {
  //无效状态不响应
  if (!enable) return
  if (selectable) {
    //是选中按钮
    //选中状态取反
    selected.value = !selected.value
    emit('select', selected.value)
    // console.log('select')
  } else {
    //普通按钮
    emit('click', true)
    // console.log('click')
  }
}
const classActive = computed(() => {
  return selected.value
    ? {
        background: props.state.backgroundColor
      }
    : {}
})
</script>

<template>
  <div class="button" @mousedown.capture.prevent.stop="onClick">
    <div class="innerBounds" :style="classActive">
      <slot></slot>
    </div>
  </div>
</template>

<style scoped>
.button {
  width: 48px;
  height: 48px;
  display: flex;
  justify-content: center;
  align-items: center;
}
.button .innerBounds {
  border-radius: 8px;
  display: flex;
  width: 44px;
  height: 44px;
  justify-content: center;
  align-items: center;
}
.active {
  background: #eeeeee;
}
</style>
